<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>排行榜</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{
            outline:none;
        }
        .toplist{
            background-image: url("../../image/guanjun.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 60% 96px;
        }
        .toplist-item{
            background-image: url("../../image/guanjun.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 60% 96px;
        }


        .toplist-fabulous{
            height: 200px;
            padding-top: 10px;
        }
        .toplist-fabulous .van-tabs__nav{
            padding: 0 40px !important;
        }
        .toplist-fabulous .van-tabs__nav--card .van-tab.van-tab--active{
            color: #F95656 !important;
            background-color: #fff;
            border-right: none;
        }
        .toplist-fabulous .van-tabs__nav--card{
            border: none;
        }
        .toplist-fabulous .van-tabs__nav--card .van-tab{
            width: 75px !important;
            border-radius: 15px;
            border: 1px solid #fff;
        }
        .toplist-fabulous .van-tab{
            margin: 0 10px;
        }
        .toplist-fabulous .toplist-item {
            width: 100%;
            height: 140px;
            background-color: #F95656;
            padding-top: 20px;
            box-sizing: border-box;
        }
        .toplist-item img{
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: block;
            margin: auto;
        }
        .toplist-item  .fans-number{
            color:#fff;
            font-size: 12px;
            display: flex;
            justify-content: center;
            margin-top: 12px;
        }
        .blacklist-people .blacklist-head-datas .status_follow{
            border: 1px solid #F95656;
            color: #F95656;
        }
        .fans-people-list .blacklist-head-datas .active_style{
            color: #F95656;
            border: 1px solid #F95656;
        }
    </style>
</head>

<body style="background: #fff;">
<div id="app" class="rankinglist"  v-cloak>
    <div style="padding-top: 29px;background-color: #F95656;"  class="home-people">
        <van-tabs v-model="active">
            <img class="home-jiantou" style="width: 16px; height: 18px;"  v-back.tapmode  src="../../image/back.png" />
            <van-tab title="粉丝榜">
                <div class="toplist" v-if="ranking_list_top">
                    <img :src="ranking_list_top.member_avatar" v-show="ranking_list_top != ''"/>
                    <img src="../../image/fans.png" v-show="ranking_list_top == ''"/>
                    <div class="toplist-title" style="">
                        <div class="toplist-name">
                            {{ranking_list_top == '' ?  '虚位以待' : ranking_list_top.nickname}}
                        </div>
                        <div class="toplist-follow" v-show="ranking_list_top.attention_member_id != member_id && ranking_list_top != ''" v-myclick="[ranking_list_top.attention_member_id,add_follow_ranking]" :class="{'active_top' : ranking_list_top.attention_flag == 1}">
                            {{ranking_list_top.attention_flag == 1 ? '已关注' : '关注'}}
                        </div>
                    </div>
                    <div class="fans-number">
                        <span>粉丝:{{ranking_list_top.fans_number}}</span>
                    </div>
                </div>
                <div class="blacklist-people" style="background-color: #fff;">
                    <ul>
                        <li v-for="(list, index) in ranking_list.board_list" :key="index">
                            <img class="fanslist-img" v-src="'../../image/tongpai.png'" v-show="index+2 == 3">
                            <img class="fanslist-img" v-src="'../../image/yinpai.png'" v-show="index+2 == 2">
                            <span class="fanslist-img" style="left: 5px" v-show="index+2 != 3 && index+2 != 2">{{index+2}}</span>
                            <div class="fans-people-list">
                                <div class="blacklist-head">
                                    <img :src="list.member_avatar">
                                </div>
                                <div class="blacklist-head-datas">
                                    <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.nickname}}</span>
                                    <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                        粉丝：<span>{{list.fans_number}}</span>
                                    </div>
                                    <div class="recovery" v-show="list.attention_member_id != member_id " v-myclick="[index,add_follow_ranking_two]" :class="{'active_style' : list.attention_flag == 0}">
                                        {{list.attention_flag == 1 ? '已关注' : '关注'}}
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="onself" v-show="ranking_list_bottom != ''">
                    <div class="onself-list">
                        <span class="fanslist-img" style="left: 5px">{{ranking_list_bottom.rank_index}}</span>
                        <div class="fans-people-list">
                            <div class="blacklist-head">
                                <img :src="ranking_list_bottom.member_avatar">
                            </div>
                            <div class="blacklist-head-datas">
                                <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{ranking_list_bottom.nickname}}</span>
                                <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                    粉丝：<span>{{ranking_list_bottom.fans_number}}</span>
                                </div>
                                <div class="recovery_top" v-if="ranking_list_bottom.fans_number != 0">
                                    <div class="recovery" v-show="ranking_list_bottom.rank_index != 1">
                                        离上1名只差 <span style="color:#F95656;font-weight: bold">{{ranking_list_bottom.number_sub}}</span>个粉丝
                                    </div>
                                    <div class="recovery" v-show="ranking_list_bottom.rank_index == 1">
                                        你已位列榜单之巅！
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="ranking_list_top == ''" style="text-align:center;padding-top:50px;background-color: #fff">
                    <img v-src="'../../image/guanzhu.png'" style="margin:0 auto;width:30%">
                    <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">还未有记录</div>
                </div>
            </van-tab>
            <van-tab title="获赞榜">
                <div class="toplist toplist-fabulous">
                    <van-tabs type="card" v-model="active_info">
                        <van-tab title="日榜">
                            <div class="toplist" v-if="fabulous_list_top">
                                <img :src="fabulous_list_top.member_avatar" v-show="fabulous_list_top != '' "/>
                                <img src="../../image/fans.png" v-show="fabulous_list_top == ''"/>
                                <div class="toplist-title" style="">
                                    <div class="toplist-name">
                                        {{fabulous_list_top== '' ?  '虚位以待' : fabulous_list_top.nickname}}
                                    </div>
                                    <div class="toplist-follow" v-show="fabulous_list_top.member_id != member_id && fabulous_list_top != ''" v-myclick="[fabulous_list_top.member_id,add_follow]" :class="{'active_top' : fabulous_list_top.attention_flag == 1}">
                                        {{fabulous_list_top.attention_flag == 1 ? '已关注' : '关注'}}
                                    </div>
                                </div>
                                <div class="fans-number">
                                    <span>获赞:{{fabulous_list_top.total_praise_number}}</span>
                                </div>
                            </div>
                            <div class="blacklist-people" style="background-color: #fff;">
                                <ul>
                                    <li v-for="(list, index) in fabulous_list_con" :key="index">
                                        <img class="fanslist-img" v-src="'../../image/tongpai.png'" v-show="index+2 == 3">
                                        <img class="fanslist-img" v-src="'../../image/yinpai.png'" v-show="index+2 == 2">
                                        <span class="fanslist-img" style="left: 5px" v-show="index+2 != 3 && index+2 != 2">{{index+2}}</span>
                                        <div class="fans-people-list">
                                            <div class="blacklist-head">
                                                <img :src="list.member_avatar">
                                            </div>
                                            <div class="blacklist-head-datas">
                                                <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.nickname}}</span>
                                                <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                    获赞：<span>{{list.total_praise_number}}</span>
                                                </div>
                                                <div class="recovery" v-show="list.member_id != member_id" v-myclick="[index,add_follow_two]" :class="{'active_style' : list.attention_flag == 0}">
                                                    {{list.attention_flag == 1 ? '已关注' : '关注'}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <div style="width: 100%;height: 68px;"></div>
                                </ul>
                            </div>
                            <div class="onself" v-show="fabulous_list_bottom != ''">
                                <div class="onself-list">
                                    <span class="fanslist-img" style="left: 5px">{{fabulous_list_bottom.total_praise_number == '0' ? '99+' : fabulous_list_bottom.rank_index}}</span>
                                    <div class="fans-people-list">
                                        <div class="blacklist-head">
                                            <img :src="fabulous_list_bottom.member_avatar">
                                        </div>
                                        <div class="blacklist-head-datas">
                                            <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{fabulous_list_bottom.nickname}}</span>
                                            <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                获赞：<span>{{fabulous_list_bottom.total_praise_number}}</span>
                                            </div>
                                            <div class="recovery_top" if="fabulous_list_bottom.total_praise_number != 0">
                                                <div class="recovery" v-show="fabulous_list_bottom.rank_index != 1">
                                                    离上1名只差
                                                    <span style="color:#F95656;font-weight: bold">{{fabulous_list_bottom.number_sub}}</span>
                                                    个赞
                                                </div>
                                                <div class="recovery" v-show="fabulous_list_bottom.rank_index == 1">
                                                    你已位列榜单之巅！
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="fabulous_list_top == ''" style="text-align:center;margin-top:50px">
                                <img v-src="'../../image/guanzhu.png'" style="margin:0 auto;width:30%">
                                <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">还未有记录</div>
                            </div>
                        </van-tab>
                        <van-tab title="周榜">
                            <div class="toplist" v-if="fabulous_list_top">
                                <img :src="fabulous_list_top.member_avatar" v-show="fabulous_list_top != '' "/>
                                <img src="../../image/fans.png" v-show="fabulous_list_top == ''"/>
                                <div class="toplist-title" style="">
                                    <div class="toplist-name">
                                        {{fabulous_list_top == '' ?  '虚位以待' : fabulous_list_top.nickname}}
                                    </div>
                                    <div class="toplist-follow" v-show="fabulous_list_top.member_id != member_id && fabulous_list_top != ''" v-myclick="[fabulous_list_top.member_id,add_follow]" :class="{'active_top' : fabulous_list_top.attention_flag == 1}">
                                        {{fabulous_list_top.attention_flag == 1 ? '已关注' : '关注'}}
                                    </div>
                                </div>
                                <div class="fans-number">
                                    <span>获赞:{{fabulous_list_top.total_praise_number}}</span>
                                </div>
                            </div>
                            <div class="blacklist-people" style="background-color: #fff;">
                                <ul>
                                    <li v-for="(list, index) in fabulous_list_con" :key="index">
                                        <img class="fanslist-img" v-src="'../../image/tongpai.png'" v-show="index+2 == 3">
                                        <img class="fanslist-img" v-src="'../../image/yinpai.png'" v-show="index+2 == 2">
                                        <span class="fanslist-img" style="left: 5px" v-show="index+2 != 3 && index+2 != 2">{{index+2}}</span>
                                        <div class="fans-people-list">
                                            <div class="blacklist-head">
                                                <img :src="list.member_avatar">
                                            </div>
                                            <div class="blacklist-head-datas">
                                                <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.nickname}}</span>
                                                <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                    获赞：<span>{{list.total_praise_number}}</span>
                                                </div>
                                                <div class="recovery" v-show="list.member_id != member_id" v-myclick="[index,add_follow_two]" :class="{'active_style' : list.attention_flag == 0}">
                                                    {{list.attention_flag == 1 ? '已关注' : '关注'}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <div style="width: 100%;height: 68px;"></div>
                                </ul>
                            </div>
                            <div class="onself" v-show="fabulous_list_bottom != ''">
                                <div class="onself-list">
                                    <span class="fanslist-img" style="left: 5px">{{fabulous_list_bottom.total_praise_number == '0' ? '99+' : fabulous_list_bottom.rank_index}}</span>
                                    <div class="fans-people-list">
                                        <div class="blacklist-head">
                                            <img :src="fabulous_list_bottom.member_avatar">
                                        </div>
                                        <div class="blacklist-head-datas">
                                            <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{fabulous_list_bottom.nickname}}</span>
                                            <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                获赞：<span>{{fabulous_list_bottom.total_praise_number}}</span>
                                            </div>
                                            <div class="recovery_top" v-if="fabulous_list_bottom.total_praise_number != 0">
                                                <div class="recovery" v-show="fabulous_list_bottom.rank_index != 1">
                                                    离上1名只差
                                                    <span style="color:#F95656;font-weight: bold">{{fabulous_list_bottom.number_sub}}</span>
                                                    个赞
                                                </div>
                                                <div class="recovery" v-show="fabulous_list_bottom.rank_index == 1">
                                                    你已位列榜单之巅！
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="fabulous_list_top == ''" style="text-align:center;margin-top:50px">
                                <img v-src="'../../image/guanzhu.png'" style="margin:0 auto;width:30%">
                                <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">还未有记录</div>
                            </div>
                        </van-tab>
                        <van-tab title="总榜">
                            <div class="toplist" v-if="fabulous_list_top">
                                <img :src="fabulous_list_top.member_avatar" v-show="fabulous_list_top != '' "/>
                                <img src="../../image/fans.png" v-show="fabulous_list_top == ''"/>
                                <div class="toplist-title" style="">
                                    <div class="toplist-name">
                                        {{fabulous_list_top == '' ?  '虚位以待' : fabulous_list_top.nickname}}
                                    </div>
                                    <div class="toplist-follow" v-show="fabulous_list_top.member_id != member_id && fabulous_list_top != ''" v-myclick="[fabulous_list_top.member_id,add_follow]" :class="{'active_top' : fabulous_list_top.attention_flag == 1}">
                                        {{fabulous_list_top.attention_flag == 1 ? '已关注' : '关注'}}
                                    </div>
                                </div>
                                <div class="fans-number">
                                    <span>获赞:{{fabulous_list_top.total_praise_number}}</span>
                                </div>
                            </div>
                            <div class="blacklist-people" style="background-color: #fff;">
                                <ul>
                                    <li v-for="(list, index) in fabulous_list_con" :key="index">
                                        <img class="fanslist-img" v-src="'../../image/tongpai.png'" v-show="index+2 == 3">
                                        <img class="fanslist-img" v-src="'../../image/yinpai.png'" v-show="index+2 == 2">
                                        <span class="fanslist-img" style="left: 5px" v-show="index+2 != 3 && index+2 != 2">{{index+2}}</span>
                                        <div class="fans-people-list">
                                            <div class="blacklist-head">
                                                <img :src="list.member_avatar">
                                            </div>
                                            <div class="blacklist-head-datas">
                                                <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.nickname}}</span>
                                                <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                    获赞：<span>{{list.total_praise_number}}</span>
                                                </div>
                                                <div class="recovery" v-show="list.member_id != member_id" v-myclick="[index,add_follow_two]" :class="{'active_style' : list.attention_flag == 0}">
                                                    {{list.attention_flag == 1 ? '已关注' : '关注'}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <div style="width: 100%;height: 68px;"></div>
                                </ul>
                            </div>
                            <div class="onself" v-show="fabulous_list_bottom != ''">
                                <div class="onself-list">
                                    <span class="fanslist-img" style="left: 5px">{{fabulous_list_bottom.total_praise_number == '0' ? '99+' : fabulous_list_bottom.rank_index}}</span>
                                    <div class="fans-people-list">
                                        <div class="blacklist-head">
                                            <img :src="fabulous_list_bottom.member_avatar">
                                        </div>
                                        <div class="blacklist-head-datas">
                                            <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{fabulous_list_bottom.nickname}}</span>
                                            <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                获赞：<span>{{fabulous_list_bottom.total_praise_number}}</span>
                                            </div>
                                            <div class="recovery_top" v-if="fabulous_list_bottom.total_praise_number != 0">
                                                <div class="recovery" v-show="fabulous_list_bottom.rank_index != 1">
                                                    离上1名只差
                                                    <span style="color:#F95656;font-weight: bold">{{fabulous_list_bottom.number_sub}}</span>
                                                    个赞
                                                </div>
                                                <div class="recovery" v-show="fabulous_list_bottom.rank_index == 1">
                                                    你已位列榜单之巅！
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="fabulous_list_top == ''" style="text-align:center;margin-top:50px">
                                <img v-src="'../../image/guanzhu.png'" style="margin:0 auto;width:30%">
                                <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">还未有记录</div>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
            </van-tab>
            <van-tab title="礼物榜">
                <div class="toplist toplist-fabulous">
                    <van-tabs type="card" v-model="active_gift">
                        <van-tab title="日榜">
                            <div class="toplist" v-if="gift_list_top">
                                <img :src="gift_list_top.member_avatar" v-show="gift_list_top != ''"/>
                                <img src="../../image/fans.png" v-show="gift_list_top == ''"/>
                                <div class="toplist-title" style="">
                                    <div class="toplist-name">
                                        {{gift_list_top == '' ?  '虚位以待' : gift_list_top.nickname}}
                                    </div>
                                    <div class="toplist-follow" :class="{'active_top' : fabulous_list_top.attention_flag == 1}" v-show="gift_list_top.receive_member_id != member_id" v-if="gift_list_top != ''" v-myclick="[gift_list_top.receive_member_id,add_follow_gift]">
                                        {{gift_list_top.attention_flag == 1 ? '已关注' : '关注'}}
                                    </div>
                                </div>
                                <div class="fans-number">
                                    <span>礼物:{{gift_list_top.total_gift_number}}</span>
                                </div>
                            </div>
                            <div class="blacklist-people" style="background-color: #fff;">
                                <ul>
                                    <li v-for="(list, index) in gift_list_con" :key="index">
                                        <img class="fanslist-img" v-src="'../../image/tongpai.png'" v-show="index+2 == 3">
                                        <img class="fanslist-img" v-src="'../../image/yinpai.png'" v-show="index+2 == 2">
                                        <span class="fanslist-img" style="left: 5px" v-show="index+2 != 3 && index+2 != 2">{{index+2}}</span>
                                        <div class="fans-people-list">
                                            <div class="blacklist-head">
                                                <img :src="list.member_avatar">
                                            </div>
                                            <div class="blacklist-head-datas">
                                                <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.nickname}}</span>
                                                <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                    礼物：<span>{{list.total_gift_number}}</span>
                                                </div>
                                                <div class="recovery" v-show="list.receive_member_id != member_id" v-myclick="[index,gift_follow_gift]" :class="{'active_style' : list.attention_flag == 0}">
                                                    {{list.attention_flag == 1 ? '已关注' : '关注'}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <div style="width: 100%;height: 68px;"></div>
                                </ul>
                            </div>
                            <div class="onself" v-show="gift_list_bottom != ''">
                                <div class="onself-list">
                                    <span class="fanslist-img" style="left: 5px">{{gift_list_bottom.rank_index}}</span>
                                    <div class="fans-people-list">
                                        <div class="blacklist-head">
                                            <img :src="gift_list_bottom.member_avatar">
                                        </div>
                                        <div class="blacklist-head-datas">
                                            <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{gift_list_bottom.nickname}}</span>
                                            <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                礼物：<span>{{gift_list_bottom.total_gift_number}}</span>
                                            </div>
                                            <div class="recovery_top" v-if="gift_list_bottom.total_gift_number != 0">
                                                <div class="recovery" v-show="gift_list_bottom.rank_index != 1">
                                                    离上1名只差
                                                    <span style="color:#F95656;font-weight: bold">{{gift_list_bottom.number_sub}}</span>
                                                    个礼物
                                                </div>
                                                <div class="recovery" v-show="gift_list_bottom.rank_index == 1">
                                                    你已位列榜单之巅！
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="gift_list_top == ''" style="text-align:center;margin-top:50px">
                                <img v-src="'../../image/guanzhu.png'" style="margin:0 auto;width:30%">
                                <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">还未有记录</div>
                            </div>
                        </van-tab>
                        <van-tab title="周榜">
                            <div class="toplist" v-if="gift_list_top">
                                <img :src="gift_list_top.member_avatar" v-show="gift_list_top != ''"/>
                                <img src="../../image/fans.png" v-show="gift_list_top == ''"/>
                                <div class="toplist-title" style="">
                                    <div class="toplist-name">
                                        {{gift_list_top == '' ?  '虚位以待' : gift_list_top.nickname}}
                                    </div>
                                    <div class="toplist-follow" :class="{'active_top' : fabulous_list_top.attention_flag == 1}" v-show="gift_list_top.receive_member_id != member_id" v-if="gift_list_top != ''" v-myclick="[gift_list_top.receive_member_id,add_follow_gift]">
                                        {{gift_list_top.attention_flag == 1 ? '已关注' : '关注'}}
                                    </div>
                                </div>
                                <div class="fans-number">
                                    <span>礼物:{{gift_list_top.total_gift_number}}</span>
                                </div>
                            </div>
                            <div class="blacklist-people" style="background-color: #fff;">
                                <ul>
                                    <li v-for="(list, index) in gift_list_con" :key="index">
                                        <img class="fanslist-img" v-src="'../../image/tongpai.png'" v-show="index+2 == 3">
                                        <img class="fanslist-img" v-src="'../../image/yinpai.png'" v-show="index+2 == 2">
                                        <span class="fanslist-img" style="left: 5px" v-show="index+2 != 3 && index+2 != 2">{{index+2}}</span>
                                        <div class="fans-people-list">
                                            <div class="blacklist-head">
                                                <img :src="list.member_avatar">
                                            </div>
                                            <div class="blacklist-head-datas">
                                                <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.nickname}}</span>
                                                <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                    礼物：<span>{{list.total_gift_number}}</span>
                                                </div>
                                                <div class="recovery" v-show="list.receive_member_id != member_id" v-myclick="[index,gift_follow_gift]" :class="{'active_style' : list.attention_flag == 0}">
                                                    {{list.attention_flag == 1 ? '已关注' : '关注'}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <div style="width: 100%;height: 68px;"></div>
                                </ul>
                            </div>
                            <div class="onself" v-show="gift_list_bottom != ''">
                                <div class="onself-list">
                                    <span class="fanslist-img" style="left: 5px">{{gift_list_bottom.rank_index}}</span>
                                    <div class="fans-people-list">
                                        <div class="blacklist-head">
                                            <img :src="gift_list_bottom.member_avatar">
                                        </div>
                                        <div class="blacklist-head-datas">
                                            <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{gift_list_bottom.nickname}}</span>
                                            <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                礼物：<span>{{gift_list_bottom.total_gift_number}}</span>
                                            </div>
                                            <div class="recovery_top" v-if="gift_list_bottom.total_gift_number != 0">
                                                <div class="recovery" v-show="gift_list_bottom.rank_index != 1">
                                                    离上1名只差
                                                    <span style="color:#F95656;font-weight: bold">{{gift_list_bottom.number_sub}}</span>
                                                    个礼物
                                                </div>
                                                <div class="recovery" v-show="gift_list_bottom.rank_index == 1">
                                                    你已位列榜单之巅！
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="gift_list_top == ''" style="text-align:center;margin-top:50px">
                                <img v-src="'../../image/guanzhu.png'" style="margin:0 auto;width:30%">
                                <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">还未有记录</div>
                            </div>
                        </van-tab>
                        <van-tab title="总榜">
                            <div class="toplist" v-if="gift_list_top">
                                <img :src="gift_list_top.member_avatar" v-show="gift_list_top != ''"/>
                                <img src="../../image/fans.png" v-show="gift_list_top == ''"/>
                                <div class="toplist-title" style="">
                                    <div class="toplist-name">
                                        {{gift_list_top == '' ?  '虚位以待' : gift_list_top.nickname}}
                                    </div>
                                    <div class="toplist-follow" :class="{'active_top' : fabulous_list_top.attention_flag == 1}" v-show="gift_list_top.receive_member_id != member_id" v-if="gift_list_top != ''" v-myclick="[gift_list_top.receive_member_id,add_follow_gift]">
                                        {{gift_list_top.attention_flag == 1 ? '已关注' : '关注'}}
                                    </div>
                                </div>
                                <div class="fans-number">
                                    <span>礼物:{{gift_list_top.total_gift_number}}</span>
                                </div>
                            </div>
                            <div class="blacklist-people" style="background-color: #fff;">
                                <ul>
                                    <li v-for="(list, index) in gift_list_con" :key="index">
                                        <img class="fanslist-img" v-src="'../../image/tongpai.png'" v-show="index+2 == 3">
                                        <img class="fanslist-img" v-src="'../../image/yinpai.png'" v-show="index+2 == 2">
                                        <span class="fanslist-img" style="left: 5px" v-show="index+2 != 3 && index+2 != 2">{{index+2}}</span>
                                        <div class="fans-people-list">
                                            <div class="blacklist-head">
                                                <img :src="list.member_avatar">
                                            </div>
                                            <div class="blacklist-head-datas">
                                                <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{list.nickname}}</span>
                                                <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                    礼物：<span>{{list.total_gift_number}}</span>
                                                </div>
                                                <div class="recovery" v-show="list.receive_member_id != member_id" v-myclick="[index,gift_follow_gift]" :class="{'active_style' : list.attention_flag == 0}">
                                                    {{list.attention_flag == 1 ? '已关注' : '关注'}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <div style="width: 100%;height: 68px;"></div>
                                </ul>
                            </div>
                            <div class="onself" v-show="gift_list_bottom != ''">
                                <div class="onself-list">
                                    <span class="fanslist-img" style="left: 5px">{{gift_list_bottom.rank_index}}</span>
                                    <div class="fans-people-list">
                                        <div class="blacklist-head">
                                            <img :src="gift_list_bottom.member_avatar">
                                        </div>
                                        <div class="blacklist-head-datas">
                                            <span class="blacklist-title" style="font-size: 15px;margin-bottom: 2px;">{{gift_list_bottom.nickname}}</span>
                                            <div class="blacklist-title" style="font-size: 12px;color: #999;">
                                                礼物：<span>{{gift_list_bottom.total_gift_number}}</span>
                                            </div>
                                            <div class="recovery_top" v-if="gift_list_bottom.total_gift_number != 0">
                                                <div class="recovery" v-show="gift_list_bottom.rank_index != 1">
                                                    离上1名只差
                                                    <span style="color:#F95656;font-weight: bold">{{gift_list_bottom.number_sub}}</span>
                                                    个礼物
                                                </div>
                                                <div class="recovery" v-show="gift_list_bottom.rank_index == 1">
                                                    你已位列榜单之巅！
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div v-show="gift_list_top == ''" style="text-align:center;margin-top:50px">
                                <img v-src="'../../image/guanzhu.png'" style="margin:0 auto;width:30%">
                                <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">还未有记录</div>
                            </div>
                        </van-tab>
                    </van-tabs>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>

<script>
    var vm,
        wx,
        ranking_list,
        ranking_list_top,
        ranking_list_con,
        ranking_list_bottom,
        fabulous_list,
        fabulous_list_con,
        fabulous_list_top,
        fabulous_list_bottom,
        gift_list,
        gift_list_con,
        gift_list_top,
        gift_list_bottom,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        wx = api.require('wx');
        // setBSImg();
        var data = {
            member_id:getPrefs('member_id'),
        };
        var callback = function (ret) {
            ranking_list = ret.content;
            ranking_list_con = ret.content.board_list;
            ranking_list_top = ret.content.top_info;
            ranking_list_bottom = ret.content.current_browse_info;
            console.log(JSON.stringify(ranking_list))
            initApp();
        };
        pinet.post(APIURL+'/app/Board/fansBoard', data, callback);
        api.parseTapmode();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                active: 0,
                active_info:0,
                active_gift:0,
                member_id:getPrefs('member_id'),
                ranking_list:ranking_list,
                ranking_list_top:ranking_list_top,
                ranking_list_con:ranking_list_con,
                ranking_list_bottom:ranking_list_bottom,
                fabulous_list:fabulous_list,
                fabulous_list_con:fabulous_list_con,
                fabulous_list_top:fabulous_list_top,
                fabulous_list_bottom:fabulous_list_bottom,
                gift_list:gift_list,
                gift_list_con:gift_list_con,
                gift_list_top:gift_list_top,
                gift_list_bottom:gift_list_bottom,
            },
            mounted:function(){
                this.get_fabulous();
                this.get_gift();
            },
            watch: {
                active:function(value){
                    this.get_fabulous();
                    this.get_gift();
                },
                active_info:function (value) {
                    this.get_fabulous();
                },
                active_gift:function (value) {
                    this.get_gift();
                }
            },
            computed: {

            },
            methods: {
                add_follow_ranking:function(value){
                    if(!hasPrefs('token')){
                        api.toast({
                            msg: '请登录',
                            duration: 2000,
                            location: 'middle'
                        });
                        return;
                    }
                    var data = {
                        member_id: getPrefs('member_id'),
                        attention_member_id: value,
                    };
                    var callback = function (ret) {
                        api.toast({
                            msg: ret.message,
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.ranking_list_top.attention_flag = vm.ranking_list_top.attention_flag==1?0:1
                    };
                    pinet.post(APIURL+'/app/dynamic/attention', data, callback);
                },
                add_follow_ranking_two:function(value){
                    if(!hasPrefs('token')){
                        api.toast({
                            msg: '请登录',
                            duration: 2000,
                            location: 'middle'
                        });
                        return;
                    }
                    console.log(vm.ranking_list_con[value].attention_member_id)
                    var data = {
                        member_id: getPrefs('member_id'),
                        attention_member_id: vm.ranking_list_con[value].attention_member_id,
                    };
                    var callback = function (ret) {
                        api.toast({
                            msg: ret.message,
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.ranking_list_con[value].attention_flag = vm.ranking_list_con[value].attention_flag==1?0:1
                    };
                    pinet.post(APIURL+'/app/dynamic/attention', data, callback);
                },
                add_follow_gift:function(value){
                    if(!hasPrefs('token')){
                        api.toast({
                            msg: '请登录',
                            duration: 2000,
                            location: 'middle'
                        });
                        return;
                    }
                    var data = {
                        member_id: getPrefs('member_id'),
                        attention_member_id: value,
                    };
                    var callback = function (ret) {
                        api.toast({
                            msg: ret.message,
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.gift_list_top.attention_flag = vm.gift_list_top.attention_flag==1?0:1
                    };
                    pinet.post(APIURL+'/app/dynamic/attention', data, callback);
                },
                gift_follow_gift:function(value){
                    if(!hasPrefs('token')){
                        api.toast({
                            msg: '请登录',
                            duration: 2000,
                            location: 'middle'
                        });
                        return;
                    }
                    var data = {
                        member_id: getPrefs('member_id'),
                        attention_member_id: vm.gift_list_con[value].receive_member_id,
                    };
                    var callback = function (ret) {
                        api.toast({
                            msg: ret.message,
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.gift_list_con[value].attention_flag = vm.gift_list_con[value].attention_flag==1?0:1
                    };
                    pinet.post(APIURL+'/app/dynamic/attention', data, callback);
                },
                add_follow:function(value){
                    if(!hasPrefs('token')){
                        api.toast({
                            msg: '请登录',
                            duration: 2000,
                            location: 'middle'
                        });
                        return;
                    }
                    var data = {
                        member_id: getPrefs('member_id'),
                        attention_member_id: value,
                    };
                    var callback = function (ret) {
                        api.toast({
                            msg: ret.message,
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.fabulous_list_top.attention_flag = vm.fabulous_list_top.attention_flag==1?0:1
                    };
                    pinet.post(APIURL+'/app/dynamic/attention', data, callback);
                },
                add_follow_two:function(value){
                    if(!hasPrefs('token')){
                        api.toast({
                            msg: '请登录',
                            duration: 2000,
                            location: 'middle'
                        });
                        return;
                    }
                    console.log(vm.fabulous_list_con[value].member_id);
                    var data = {
                        member_id: getPrefs('member_id'),
                        attention_member_id: vm.fabulous_list_con[value].member_id,
                    };
                    var callback = function (ret) {
                        api.toast({
                            msg: ret.message,
                            duration: 2000,
                            location: 'middle'
                        });
                        vm.fabulous_list_con[value].attention_flag = vm.fabulous_list_con[value].attention_flag==1?0:1
                    };
                    pinet.post(APIURL+'/app/dynamic/attention', data, callback);
                },
                get_fabulous:function () {
                    var data = {
                        member_id:getPrefs('member_id'),
                        flag:this.active_info+1,
                    };
                    var callback = function (ret) {
                        vm.fabulous_list = ret.content;
                        vm.fabulous_list_con = ret.content.board_list;
                        vm.fabulous_list_top = ret.content.top_info;
                        vm.fabulous_list_bottom = ret.content.current_browse_info;
                        console.log(JSON.stringify(ret))
                    };
                    pinet.post(APIURL+'/app/Board/praiseBorad', data, callback);
                },
                get_gift:function () {
                    var data = {
                        member_id:getPrefs('member_id'),
                        flag:this.active_gift+1,
                    };
                    var callback = function (ret) {
                        vm.gift_list = ret.content;
                        vm.gift_list_top = ret.content.top_info;
                        vm.gift_list_con = ret.content.board_list;
                        vm.gift_list_bottom = ret.content.current_browse_info;
                        console.log(JSON.stringify(vm.gift_list))
                    };
                    pinet.post(APIURL+'/app/Board/giftBorad', data, callback);
                }
            },
        })
    }


</script>

</html>
